<!-- header -->
<head th:fragment="head(title)">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <title th:if="${title != ''}" th:text="${title}"></title>

    <title th:unless="${title != ''}" th:text="${@webInfo.getCmsInfoBykey('title').value}"></title>
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>

    <meta name="keywords" th:content="${@webInfo.getCmsInfoBykey('keywords').value}"/>
    <meta name="description" th:content="${@webInfo.getCmsInfoBykey('description').value}"/>

    <link th:href="@{/favicon.ico}" rel="shortcut icon"/>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/jquery.contextMenu.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/animate.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/skins.css?v=20200902}" rel="stylesheet"/>
    <link th:href="@{/ruoyi/css/ry-ui.css?v=4.7.7}" rel="stylesheet"/>
    <link th:href="@{/css/web.css}" rel="stylesheet"/>

    <script th:src="@{/js/jquery.min.js?v=3.6.3}"></script>
    <script th:src="@{/js/me/util.js}"></script>
    <script th:src="@{/js/me/qrcode.js}"></script>
    <script th:src="@{/ajax/libs/layer/layer.min.js}"></script>

    <script th:inline="javascript">
        var ctx = [[@{/}]];
        var origin = window.location.origin
        var base =  origin + ctx
    </script>
</head>

<!-- 导航菜单 -->
<div th:fragment="header(activePath)">
    <div class="index-header">
        <div class="index-header-bg" th:style="'background: url('+${@webInfo.getCmsInfoBykey('indexBanner').imgUrl}+') no-repeat 0 -115px; background-size: 100% auto;'"></div>
        <div class="index-header-main">
            <!-- 标题+搜索框 -->
            <div class="index-header-main__block1">
                <div class="index-header-titles" th:with="logo=${@webInfo.getCmsInfoBykey('logo') != null ? @webInfo.getCmsInfoBykey('logo').imgUrl : ''}">
                    <a href="/">
                        <img class="index-header-logo" th:src="${#strings.isEmpty(logo) ? '/img/logo.png' : logo}"/>
                        <div>
                            <div  class="index-title1" th:text="${@webInfo.getCmsInfoBykey('title').value}"></div>
                            <div class="index-title2" th:text="${@webInfo.getCmsInfoBykey('subTitle').value}"></div>
                        </div>
                    </a>
                </div>
                <div class="index-header-search">
                    <input type="text" id="searchKey" placeholder="请输入您想查询的内容"/>
                    <span id="searchBtn">
                        <i class="fa fa-search"></i>
                    </span>
                </div>
                <div class="index-header-main__back">
                    <a href="/">
                        <i class="fa fa-angle-left"></i>
                        返回首页
                    </a>
                </div>
            </div>

            <div class="index-header-menus" th:with="menus=${@webInfo.getCmsNav()}">
                <div class="menus-block" th:each="menu : ${menus}">
                    <a th:text="${menu.name}"
                       th:class="${activePath} != '' ? (${menu.link == activePath ? 'menus-block-item active' : 'menus-block-item'}) :
                       (${#httpServletRequest.servletPath.startsWith(menu.link) && menu.link != '/' ? 'menus-block-item active' : 'menus-block-item'})"
                       th:href="${menu.link}">
                    </a>
                </div>
            </div>
            <div class="index-header-gray"></div>
        </div>
    </div>
</div>

<!--友情链接-->
<div th:fragment="link">
    <div class="index-link">
        <div class="common-block">
            <div class="common-block-title">
                <img class="common-block-title__ico" src="/img/link.svg"/>
                <span class="common-block-title__txt">友情链接</span>
            </div>
            <div class="common-block-content" th:with="links=${@webInfo.getCmsInfoListBykey('outLink')}">
                <a class="link-item" th:each="link : ${links}" th:href="${link.link}" target="_blank">
                    <img class="link-item__ico" th:src="${link.imgUrl}"/>
                </a>
            </div>
        </div>
    </div>
</div>

<!-- footer -->
<div th:fragment="footer">
    <div class="index-footer">
        <p th:utext="${@webInfo.getCmsInfoBykey('filings').extra}"></p>
        <p th:utext="${@webInfo.getCmsInfoBykey('bottomInfo').extra}"></p>
    </div>
</div>

<!-- 点赞、评论数 -->
<div th:fragment="likes">
    <div class="likes-block">
       <!-- <div class="likes-block-item">
            <span th:if="${currentUser != null && #lists.contains(likes, currentUser.getUserId())}">
                <i class="likes-ico fa fa-thumbs-up is-active" id="likeEl"></i>
            </span>
            <span th:if="${currentUser == null || !#lists.contains(likes, currentUser.getUserId())}">
                 <i class="likes-ico fa fa-thumbs-o-up" id="likeEl"></i>
            </span>
            (<span th:text="${likes.size()}" id="likeSize">0</span>)
        </div>
        <div class="likes-block-item">
            <i class="likes-ico fa fa-commenting"></i>
            (<span id="commentSize" th:text="${comments.size()}">0</span>)
        </div>-->
        <div class="likes-block-item">
            <i class="likes-ico fa fa-share-alt"></i>
            <span>分享到:</span>
            <span class="likes-share">
                <i class="fa fa-weixin" onclick="shareWx()"></i>
                <i class="fa fa-weibo" onclick="shareWb()"></i>
                <i class="fa fa-qq" onclick="shareQq()"></i>

                <div id="qrCodeWrap" class="qrcode-wrap">
                    <i class="fa fa-close" onclick="closeWx()"></i>
                    <div id="qrcode" class="qrcode-wrap-img"></div>
                </div>
            </span>
        </div>
    </div>
</div>

<!-- 评论列表 -->
<div th:fragment="comments">
    <!--
    <div class="page-main comment-block">
        <div class="common-block-title">
            <img class="common-block-title__ico" src="/img/start.png"/>
            <span class="common-block-title__txt">互动评论</span>
        </div>
        <div class="common-block-content" id="commentsDiv">
            <div class="comment-item comment-parent" th:each="comment : ${comments}" th:data-id="${comment.id}"
                 th:data-contentId="${comment.contentId}">
                <div class="comment-item-left">
                    <div class="comment-item-left__avatar">
                        <img class="comment-item-left__img"
                             th:src="${#strings.isEmpty(comment.avatar) ? '/img/profile.jpg' : comment.avatar}"/>
                    </div>
                </div>
                <div class="comment-item-right">
                    <div class="user-bar">
                        <div class="user-bar-form" th:text="${comment.userName}"></div>
                    </div>
                    <div class="type-text" th:utext="${comment.content}"></div>
                    <div class="interact-bar">
                        <div class="interact-bar-left">
                            <span class="interact-time" th:text="${comment.timeText}"></span>
                            <span class="interact-area" th:text="${comment.address}"></span>
                        </div>
                        <div class="interact-bar-right">
                            <div class="interact-reply" th:data-id="${comment.id}" th:data-uid="${comment.userId}">
                                <i class="fa fa-comment-o"></i>
                                <span class="reply-text">回复</span>
                            </div>
                        </div>
                    </div>
                    <div class="comment-childs" th:if="comment.children != null">
                        <div class="xcp-list comment-parent" th:each="child : ${comment.children}"
                             th:data-id="${child.id}" th:data-parentId="${child.parentId}">
                            <div class="xcp-list-item">
                                <div class="item-left">
                                    <div class="comment-item-left__avatar">
                                        <img class="comment-item-left__img"
                                             th:src="${#strings.isEmpty(child.avatar)  ? '/img/profile.jpg' : child.avatar}"/>
                                    </div>
                                </div>
                                <div class="item-right">
                                    <div class="user-bar">
                                        <div class="user-bar-form" th:text="${child.userName}"></div>
                                        <div class="user-bar-to" th:if="${child.puserid}">
                                            <i class="fa fa-play"></i>
                                            <span th:text="${child.parentUserName}"></span>
                                        </div>
                                    </div>
                                    <div class="type-text" th:utext="${child.content}"></div>
                                    <div class="interact-bar">
                                        <div class="interact-bar-left">
                                            <span class="interact-time" th:text="${child.timeText}"></span>
                                            <span class="interact-area" th:text="${child.address}"></span>
                                        </div>
                                        <div class="interact-bar-right">
                                            <div class="interact-reply" th:data-id="${child.id}" th:data-uid="${child.userId}">
                                                <i class="fa fa-comment-o"></i>
                                                <span class="reply-text">回复</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="publish-block">
            <div class="interact-publish">
                <div class="interact-publish-cont">
                    <textarea id="textArea" class="text-area"
                              placeholder="文明上网理性发言，请遵守评论服务协议"></textarea>
                    <input type="hidden" id="_contentId">
                    <input type="hidden" id="_parentId">
                    <input type="hidden" id="_puid">
                </div>
                <div class="interact-publish-opt">
                    <span id="sendBtn" class="send disabled">发表</span>
                </div>
            </div>
        </div>
    </div>
    -->
</div>

<!-- 评论js -->
<script th:fragment="comments-js" th:inline="javascript">
    var prevCommentId;

    $(function () {
        loadCommentSize()
        initEvent()

        $('#textArea').on('keyup', function () {
            const val = $(this).val();
            if ($.trim(val).length > 0) {
                $('#sendBtn').removeClass('disabled')
            } else {
                $('#sendBtn').addClass('disabled')
            }
        })

        $('#sendBtn').on('click', function () {
            if ($(this).hasClass('disabled')) {
                return
            }

            applyComment()
        })

        $('#likeEl').click(function () {
            // fa-thumbs-up is-active
            // fa-thumbs-o-up
            const isActive = $(this).hasClass('is-active')
            const contentId = $('.contentWrap').attr('contentid')
            const $el = $(this)

            isLogin().then(function () {
                $.post('/web/setContentLike', {contentId}, function (data) {
                    if (isActive) {
                        $el.removeClass('is-active')
                        $el.removeClass('fa-thumbs-up')
                        $el.addClass('fa-thumbs-o-up')
                    } else {
                        $el.addClass('is-active')
                        $el.addClass('fa-thumbs-up')
                        $el.removeClass('fa-thumbs-o-up')
                    }

                    loadLikes(contentId)
                })
            })

        })
    })

    function initEvent() {
        $('.common-block-content').on('click', '.interact-reply', function () {
            const id = $(this).attr('data-id')
            const puid = $(this).attr('data-uid') || ''
            const parent = $('.comment-parent[data-id="' + id + '"]')

            const userBarForms = parent.find('.user-bar-form')
            const name = userBarForms.eq(0).html()
            const contentId = parent.attr('data-contentid')

            if (prevCommentId === id) {
                // 取消评论
                prevCommentId = null
                $('#_parentId').val('')
                $('#_contentId').val('')
                $('#_puid').val('')
                $('#textArea').val('')
                $('#textArea').attr('placeholder', '文明上网理性发言，请遵守评论服务协议')
            } else {
                // 开始评论
                prevCommentId = id

                $('#_parentId').val(id)
                $('#_contentId').val(contentId)
                $('#_puid').val(puid)
                $('#textArea').val('')
                $('#textArea').attr('placeholder', '回复' + name + ':')
            }
        })
    }

    function applyComment() {
        isLogin().then(function () {
            const parentId = $('#_parentId').val()
            let contentId = $('#_contentId').val()
            const content = $('#textArea').val()

            if (!contentId) {
                contentId = $('.contentWrap').attr('contentid')
            }
            const params = {
                parentId,
                contentId,
                content,
                puid: $('#_puid').val()
            }

            $.ajax({
                url: '/web/addComments',
                type: 'POST',
                data: params,
                dataType: 'json',
                success: function (res) {
                    $('#_parentId').val('')
                    $('#_contentId').val('')
                    $('#_puid').val('')
                    $('#textArea').val('')
                    $('#textArea').attr('placeholder', '文明上网理性发言，请遵守评论服务协议')
                    $('#sendBtn').addClass('disabled')

                    loadCommentSize()

                    buildComments(parentId, res.data)
                }
            })
        })
    }

    function isLogin() {
        return new Promise(function (resolve, reject) {
            $.get("/web/getUserInfo", function (res) {
                if (res && res.data) {
                    resolve(res.data)
                    return
                }
                window.location.href = '/login?redirect=back'
                reject()
            }, 'json')
        })
    }

    function loadLikes(contentId) {
        $.get("/web/getLikes", {contentId: contentId}, function (res) {
            if(res.data){
                $("#likeSize").html(res.data.length)
            }
        })
    }

    // 加载数量
    function loadCommentSize() {
        const contentId = $('.contentWrap').attr('contentid')
        $.get('/web/getCommentSize/' + contentId, function (res) {
            $('#commentSize').html(res.data || 0)
        })
    }

    function buildComments(parentId, data) {
        var parentEl
        var html = []
        if(parentId) {
            const replayEl = $('.interact-reply[data-id="' + parentId + '"]')
            parentEl = replayEl.parents('.comment-parent').find('.comment-childs')

            html.push('<div class="xcp-list comment-parent" data-id="' + data.id + '" data-parentid="'+data.parentId+'">')
            html.push('   <div class="xcp-list-item">  ')
            html.push('     <div class="item-left"> ')
            html.push('         <div class="comment-item-left__avatar">  ')
            html.push('             <img src="'+(data.avatar || '/img/profile.jpg')+'" class="comment-item-left__img" />')
            html.push('         </div>')
            html.push('     </div>')
            html.push('     <div class="item-right">    ')
            html.push('         <div class="user-bar">')
            html.push('             <div class="user-bar-form">' + data.userName + '</div>')
            html.push('                 <div class="user-bar-to" > ')
            html.push('                     <i class="fa fa-play" ></i>')
            html.push('                     <span>' + data.parentUserName + '</span>')
            html.push('                 </div>')
            html.push('         </div>')
            html.push('          <div class="type-text">' + data.content + '</div>')
            html.push('          <div class="interact-bar">')
            html.push('             <div class="interact-bar-left">')
            html.push('                 <span class="interact-time">刚刚</span>')
            html.push('                 <span class="interact-area">' + data.address + '</span>')
            html.push('             </div>')
            html.push('             <div class="interact-bar-right">')
            html.push('                 <div class="interact-reply" data-id="'+data.id+'" data-uid="'+data.userId+'">')
            html.push('                     <i class="fa fa-comment-o" ></i>')
            html.push('                     <span class="reply-text">回复</span>')
            html.push('                 </div>')
            html.push('             </div>')
            html.push('         </div>')
            html.push('     </div>')
            html.push(' </div>')

        } else {
            parentEl = $('#commentsDiv')

            html.push('<div class="comment-item comment-parent" data-id="' + data.id + '" data-contentid="'+ data.contentId +'">')
            html.push(' <div class="comment-item-left">');
            html.push('     <div class="comment-item-left__avatar">');
            html.push('         <img class="comment-item-left__img" src="'+ (data.avatar || '/img/profile.jpg') +'" />');
            html.push('     </div>');
            html.push(' </div>');
            html.push(' <div class="comment-item-right">');
            html.push('  <div class="user-bar">');
            html.push('     <div class="user-bar-form">' + data.userName + '</div>');
            html.push('  </div>');
            html.push(' <div class="type-text">' + data.content + '</div>');
            html.push(' <div class="interact-bar">');
            html.push('     <div class="interact-bar-left">');
            html.push('         <span class="interact-time">刚刚</span>');
            html.push('         <span class="interact-area">' + data.address + '</span>');
            html.push('     </div>');
            html.push('     <div class="interact-bar-right">');
            html.push('         <div class="interact-reply" data-id="'+data.id + '" data-uid="'+ data.userId + '">');
            html.push('             <i class="fa fa-comment-o"  ></i>');
            html.push('             <span class="reply-text">回复</span>');
            html.push('         </div>');
            html.push('     </div>');
            html.push('   </div>');
            html.push('<div class="comment-childs"></div>');
            html.push('</div>');
        }
        parentEl.prepend(html.join(''));
        // initEvent()
    }


    function shareWx() {
        const text = window.location.href
        $('#qrcode').html('')
        var qrcode = new QRCode('qrcode', {
            render: "canvas",
            text: text,
            width : "150",               //二维码的宽度
            height : "150",              //二维码的高度
            background : "#ffffff",       //二维码的后景色
            foreground : "#000000"        //二维码的前景色
        });

        $('#qrCodeWrap').fadeIn()
    }

    function closeWx() {
        $('#qrCodeWrap').fadeOut()
    }

    function shareWb() {
        const ftit = '国家计算机病毒应急处理中心'
        const lk = window.location.origin + '/favicon.ico'
        window.open('http://service.weibo.com/share/share.php?url='+document.location.href+'?sharesource=weibo&title='+ftit+'&pic='+lk+'&appkey=2706825840');
    }

    function shareQq() {
        const ftit = '国家计算机病毒应急处理中心'
        const lk = window.location.origin + '/favicon.ico'
        window.open('http://connect.qq.com/widget/shareqq/index.html?url='+document.location.href+'?sharesource=qzone&title='+ftit+'&pics='+lk+'&summary='+document.querySelector('meta[name="description"]').getAttribute('content'));
    }


</script>



<!-- 浮动 -->
<div th:fragment="float">
    <div class="float-wrap">
        <div class="float-item float-item-user" th:if="${@permission.isUser()}">
            <a href="/serve" class="float-item-img" th:with="avatar=${@permission.getPrincipalProperty('avatar')}">
                <img th:src="${#strings.isEmpty(avatar) ? '/img/profile.jpg' : avatar}"/>
            </a>
        </div>
        <div class="float-item" >
           <div class="float-item-img">
               <img src="/img/wx.png" />
           </div>
            <div class="float-item-txt">官方公众号</div>
            <div class="float-item-preview" th:with="info=${@webInfo.getCmsInfoBykey('wxcode')}">
                <img th:if="${info != null && !#strings.isEmpty(info.imgUrl)}" th:src="${info.imgUrl}"/>
            </div>
        </div>
        <div class="float-item" >
            <div class="float-item-img">
                <img src="/img/dy.png" />
            </div>
            <div class="float-item-txt">官方抖音号</div>
            <div class="float-item-preview" th:with="info=${@webInfo.getCmsInfoBykey('dycode')}">
                <img th:if="${info != null && !#strings.isEmpty(info.imgUrl)}" th:src="${info.imgUrl}"/>
            </div>
        </div>
        <div class="float-item" >
            <div class="float-item-img">
                <img src="/img/wb.png" />
            </div>
            <div class="float-item-txt">官方微博</div>
            <div class="float-item-preview" th:with="info=${@webInfo.getCmsInfoBykey('wbcode')}">
                <img th:if="${info != null && !#strings.isEmpty(info.imgUrl)}" th:src="${info.imgUrl}"/>
            </div>
        </div>
    </div>
</div>

<!-- 浮动JS -->
<script th:fragment="float-js" th:inline="javascript">
    function preview(type) {
        $.get(ctx + 'web/getInfo', {keyCode: type}, function(res) {
            if(res.code == 0) {
                const data = res.data || {}
                let url = data.imgUrl
                if(url) {
                    url = base + url
                    layer.photos({
                        photos: {
                            "start": 0,
                            "data": [
                                {
                                    "pid": 5,
                                    "src": url,
                                }
                            ]
                        },
                        hideFooter: true // 是否隐藏底部栏 --- 2.8+
                    });
                }
            }
        })
    }

    $(function(){
        $('#searchKey').on('keyup', function(e){
           if(e.which === 13) {
                onSearch()
           }
        })

        $('#searchBtn').click(function(){
            onSearch()
        })
    })

    function onSearch() {
        const val = $('#searchKey').val()
        if($.trim(val).length === 0) {
            return
        }
        window.location.href = base + 'web/search?seo=' + encodeURIComponent(val)
     }
</script>